<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.multiple-bgs.js"></script>

	<title>Multiple Backgrounds Example</title>
	<link rel="stylesheet" type="text/css" href="page.css">
	<link rel="stylesheet" type="text/css" href="multiple-bg.css">

</head>

<body>
	
	<h1>CSS3 Multiple Backgrounds for Internet Explorer and legacy Mozilla Firefox</h1>
	<p><strong>Updated November 17, 2010</strong></p>
	<p>Have you been using wrapper DIVs to achieve rounded corners in your designs? Do you wish you could use CSS3 multiple backgrounds and stop inflating your markup? You can, using this jQuery library. Multiple backgrounds have been supported by Webkit-based browsers like Safari and Chrome for a long time. Firefox only recently implement them in version 3.6. Of course, Internet Explorer has never supported multiple-backgrounds. This library brings support to Internet Explorer and Firefox by reading the CSS code from style and link tags.</p>
	
	<code>background: url(left.gif) no-repeat 0 0, url(right.gif) no-repeat 100% 0, url(middle.gif) repeat-x 0 0;</code>
	<p>CSS3 introduced the ability for multiple backgrounds on elements. Using this new feature is very simple; simply place each background like you normally would and separate them with commas. CSS3 browser support extends to <span class="code">background-image</span>, <span class="code">background-position</span>, <span class="code">background-repeat</span>. This library only implements its own property for the shorthand style <span class="code">background</span> property. The W3C provides <a href="http://www.w3.org/TR/css3-background/#layering">information about multiple backgrounds</a>.</p>
	<!--more-->
	<ol>
		<li><a href="#multiple-bg-browser-support">Browser Support</a></li>
		<li><a href="#multiple-bg-example-usage">Example Usage</a></li>
		<li><a href="#multiple-bg-demo">Demo</a></li>
		<li><a href="#multiple-bg-functions">Public Functions</a></li>
		<li><a href="#multiple-bg-changes">Change Log</a></li>
		<li><a href="#multiple-bg-issues">Known Issues</a></li>
		<li><a href="#multiple-bg-download">Download</a></li>
	</ol>

	
	<h2 id="multiple-bg-browser-support">Browser Support</h2>
	<table cellspacing="0" cellpadding="0" border="0" class="browser_support">
	<tr>
		<th>Multiple Backgrounds</th>
		<th>IE6</th>
		<th>IE7</th>
		<th>IE8</th>
		<th>FF 2</th>
		<th>FF 3</th>
		<th>FF 3.5</th>
		<th>FF 3.6</th>
		<th>Opera 9.6+</th>
		<th>Webkit</th>
	<tr>
	<tr>
		<td>Browser</td>
		<td class="no-support">Not Supported</td>
		<td class="no-support">Not Supported</td>
		<td class="no-support">Not Supported</td>
		<td class="no-support">Not Supported</td>
		<td class="no-support">Not Supported</td>
		<td class="no-support">Not Supported</td>
		<td class="built-in">Built-In</td>
		<td class="built-in">Built-In</td>
		<td class="built-in">Built-In</td>
	</tr>
	<tr>
		<td>With Library</td>
		<td class="support">Supported</td>
		<td class="support">Supported</td>
		<td class="support">Supported</td>
		<td class="support">Supported</td>
		<td class="support">Supported</td>
		<td class="support">Supported</td>
		<td class="built-in">Built-In</td>
		<td class="built-in">Built-In</td>
		<td class="built-in">Built-In</td>
	</tr>
	</table>

	<h2 id="multiple-bg-example-usage">Example Usage</h2>
		<h3>Including the Script</h3>
		<p>All that needs to be included is the jQuery library and this script for these features to work. No extra Javascript coding is required. The minified library is only 8.7kB!</p>
		<pre>
&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery.multiple-bgs.js"&gt;&lt;/script&gt;
		</pre>
		<h3>Writing the CSS</h3>
		<p>Multiple backgrounds using the <span class="code">background</span> property are read using this Javascript library. Notice how hover and active states are supported.</p>
		<pre>

#ex1 {
    background: url(middle.gif) repeat-x 0 0; /* For unsupported browsers */
    background: url(left.gif) no-repeat 0 0, /* For CSS3 Browsers */
                url(right.gif) no-repeat 100% 0, 
                url(middle.gif) repeat-x 0 0;
}
#ex1:hover {
    background: url(middle-hover.gif) repeat-x 0 0; /* For unsupported browsers */
    background: url(left-hover.gif) no-repeat 0 0, /* For CSS3 Browsers */
                url(right-hover.gif) no-repeat 100% 0, 
                url(middle-hover.gif) repeat-x 0 0;
}
#ex1:active {
    background: url(middle-active.gif) repeat-x 0 0; /* For unsupported browsers */
    background: url(left-active.gif) no-repeat 0 0, /* For CSS3 Browsers */
                url(right-active.gif) no-repeat 100% 0, 
                url(middle-active.gif) repeat-x 0 0;
}
		</pre>

	<h2 id="multiple-bg-demo">Demo</h2>
		<div class="ex1">
			<h1>Blog Posting</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis neque vel eros sagittis congue sed sed mauris. In vitae purus dui, sed tincidunt libero. Pellentesque eget libero id metus dictum sodales. Proin a vestibulum lorem. Etiam ut accumsan libero. Etiam dolor tellus, viverra vitae sodales non, sagittis ut urna. Ut nec dui mauris, non facilisis erat. Morbi cursus sem ac erat tincidunt quis facilisis nunc volutpat. Fusce bibendum, risus et condimentum bibendum, risus erat imperdiet leo, vel iaculis massa lacus nec quam. Aenean adipiscing lectus sit amet magna dapibus sit amet commodo diam vulputate. In risus elit, condimentum rutrum feugiat a, convallis et nibh. Nulla fringilla, neque non tempor eleifend, ipsum nunc scelerisque erat, sit amet auctor augue tellus non mi. Morbi eu malesuada dolor. Vivamus sed dignissim urna. Vestibulum ut mattis lacus. Donec gravida facilisis mi, nec imperdiet mauris elementum at. Suspendisse pellentesque sodales neque tincidunt auctor.</p>
			<a href="#" class="button" onclick="return false;">View More...</a>
			<a href="#" class="button" onclick="return false;">More Postings...</a>
		</div>
		<p><a href="#" class="button" onclick="return false;">View More...</a></p>
		<div class="ex2">
			<label><span>Name:</span><input class="text" type="text"></label>
		</div>
		
	<h2 id="multiple-bg-functions">Public Functions</h2>
	<p>These are only required if you need to change the rules that are applied or apply the rules again (when loading DOM through AJAX for example).</p>
	<h3>$.fn.multipleBgReadCss(conts,prop,path)</h3>
		<p>Read in a block of CSS while looking for a multiple backgrounds</p>
		<ul>
			<li><span class="code">conts</span>&mdash;block of CSS to read in</li>
			<li><span class="code">prop</span>&mdash;which property to look for, only 'background' supported at this time</li>
			<li><span class="code">path</span>&mdash;path to prepend to image urls to make relatives work, pass <span class="code">false</span> or "" to disable</li>
		</ul>
	<h3>$.fn.multipleBgApplyCss()</h3>
		<p>Apply loaded CSS properties to the elements on this page</p>
		
	<h3>$.fn.multipleBgApplyBg(selector,attr)</h3>
		<p>Apply a specific background to a selector/element.</p>
		<ul>
			<li><span class="code">selector</span>&mdash;selector/element to apply the background to</li>
			<li><span class="code">attr</span>&mdash;which state of the element to apply (Possible values: <span class="code">jQueryMultipleBgStaticSelector</span>, <span class="code">jQueryMultipleBgHoverSelector</span>, <span class="code">jQueryMultipleBgActiveSelector</span>, <span class="code">jQueryMultipleBgFocusSelector</span>)</li>
		</ul>
		
	
	<h3>$.fn.multipleBgRules</h3>
		<p>Access the loaded rules from initialization/add your new rules to this object</p>
	<h2 id="multiple-bg-changes">Change Log</h2>
	<h3>101117</h3>
	<ul>
		<li>Fixed use of things like <span class="code">@charset "utf-8";</span> in CSS files.</li>
	</ul>
	<h3>101021</h3>
	<ul>
		<li>Many general bug fixes since last update</li>
		<li>CSS used for multiple backgrounded input fields has changed to not require a Firefox line height fix</li>
		<li>Code cleaned up so the YUI JS compressor now works properly</li>
	</ul>
	<h3>100804</h3>
	<ul>
		<li>Added support for -moz-border-radius for inputs with multiple BGs</li>
		<li>Commas inside of parentheses inside background values now work (e.g. RGBA)</li>
	</ul>
	<h3>100728</h3>
	<ul>
		<li>Fixed relative paths from remote CSS files. Now paths are not just relative to the document.</li>
		<li>Now also supports multiple selectors for one CSS rule.</li>
	</ul>
	<h3>100727</h3>
	<ul>
		<li>Tested with many elements. I ran a profiler in IE and both 7/8 were pretty close to the same speed and proportional to the number of layers applied as all the time was spent in DOM manipulation in the addLayer function. IE took about 1000ms to load 228 layers onto a modified version of this example.</li>
		<li>Line height fixed on Firefox <=3.5 by adding <span class="code">padding-top</span> to center the text vertically based on the <span class="code">height</span> CSS property.</li>
	</ul>
	<h3>100726</h3>
	<ul>
		<li>Added selector precedence (including <span class="code">!important</span>)</li>
		<li>The number of multiple backgrounds may change in each state/class</li>
		<li><span class="code">input</span> elements have wrappers on the outside now
			<ul>
				<li>CSS properties passed through to wrappers: <span class="code">margin</span>, <span class="code">display</span>, <span class="code">position</span>, <span class="code">top</span>, <span class="code">left</span>, <span class="code">right</span>, <span class="code">bottom</span>, <span class="code">float</span>, <span class="code">clear</span>, <span class="code"><em>z-index</em></span><sup>(added 100727)</sup>, <span class="code"><em>-moz-border-radius</em></span><sup>(added 100804)</sup></li>
			</ul>
		</li>
		<li><span class="code">:focus</span> psuedo-class support added</li>
	</ul>
	<h2 id="multiple-bg-issues">Known Issues</h2>
	<ul>
		<li>jQuery <strong>1.4.3</strong> will cause layout errors in Internet Explorer 6 and 7. Default to 1.4.2 instead.</li>
		<li>Doesn't support inline styles&mdash;only style and link tags</li>
		<li>If you add more backgrounds in a <span class="code">:focus</span> psuedo-class than on the static class, IE will require a second click (not double-click) to put the focus on the <span class="code">input</span>.</li>
		<li>Input fields must be <span class="code">display:block</span> and have a set <span class="code">width</span>.</li>
	</ul>
	
	<h2 id="multiple-bg-download">Download</h2>
	<p><a href="jquery.multiple-bgs.zip">jquery.multiple-bgs.zip</a> (25.5kB) - Package containing this document, example images, source code, minified library</p>
</body>
</html>

